<template>
  <!-- 查看咨询详情 -->
  <div class="app-container">
    <el-button type="primary" @click="goBack">返回</el-button>
    <div class="Information">
      <el-row>
        <el-form label-width="110px">
          <el-col :span="3">
            <el-form-item label="姓名:">{{ form.studentName }} </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="注册号:">{{ form.regCode }} </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="毕业年份:">{{ form.gradYear }} </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学生状态:"
              >{{ studentStatusData.toString() }}
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="学生确认时间:">{{ form.asys }} </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="入学年份:">{{ form.gradeName }} </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="学位:">{{ form.asys }} </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="院系:">{{ form.collName }} </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="专业:"
              >{{ form.specialityName }}
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="班级:">{{ form.className }} </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="银行卡信息:"
              >开户行: {{ form.studentBankInfoList.bankName || "暂无" }}
              <span
                class="backId"
                @click="handleAdd(form.studentBankInfoList.bsbiId)"
                v-hasPermi="[
                  'basicdata:bankInfo:add' || ' basicdata:bankInfo:edit',
                ]"
                >{{
                  form.studentBankInfoList.bsbiId == null
                    ? "新增银行卡号"
                    : "修改银行卡号"
                }}</span
              >
              <div>
                银行卡号: {{ form.studentBankInfoList.cardNumber || "暂无" }}
              </div>
              <div>{{ form.studentBankInfoList.bankStatus }}</div>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="returns">
      <div>书费：{{ formInfo.SF }}元</div>
      <div>押金：{{ formInfo.YJ }}元</div>
      <div>合计退费：{{ formInfo.TF }}元</div>
    </div>
    <div class="type-conten" v-for="(v, i) in form.gradRfDetailsList" :key="i">
      <div class="typeRet">{{ v.feeType }}</div>
      <div class="amongs" v-if="v.feeType == '图书馆' ? true : false">
        <div class="among" v-for="(item, index) in v.books" :key="index">
          <div class="books">《{{ item.title }}》</div>
        </div>
      </div>

      <div class="among" v-if="v.feeType != '图书馆' ? true : false">
        <div class="books">
          {{ v.remark }}
        </div>
      </div>
      <div class="rigth" v-if="v.feeType == '图书馆' ? true : false">
        <div>未还：{{ v.tssl || 0 }}本</div>
        <!-- <div>书的总价：{{ v.compAmount/1.5 }}元</div> -->
        <div>{{ v.value }}：{{ v.compAmount }}元</div>
      </div>
      <div class="rigth" v-if="v.feeType != '图书馆' ? true : false">
        {{ v.value }} ：{{
          v.feeType == "宿管" ? v.compAmount : v.rfAmount || 0
        }}元
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="40%" append-to-body>
      <el-form ref="back" :model="backForm" label-width="80px" :rules="rules">
        <el-form-item label="银行卡号" prop="cardNumber">
          <el-input
            v-model.trim="backForm.cardNumber"
            placeholder="请输入银行卡号"
          />
        </el-form-item>
        <el-form-item label="开户行" prop="bankName">
          <el-input placeholder="请输入开户行" v-model="backForm.bankName">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
    <script>
import {
  getGradStuRoster,
  bankInfoAdd,
  updataBankInfo,
} from "@/api/departure/gradStuRoster";
import { getDicts } from "@/api/system/dict/type";
export default {
  dicts: [
    "bc_student_famliy", // 家庭关系
  ],
  data() {
    return {
      deptOptions: [],
      form: {},
      backList: [],
      studentForm: {},
      formInfo: {},
      open: false,
      backForm: {
        cardNumber: "",
        bankName: "",
      },
      title: "",
      studentStatusData: "",
      rules: {
        cardNumber: [
          { required: true, message: "银行卡号不能为空", trigger: "blur" },
          {
            pattern: /^\d{16,19}$/,
            message: "请填写正确的银行卡号",
            trigger: "blur",
          },
        ],
        bankName: [
          { required: true, message: "开户行不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 返回上一级
    goBack() {
      this.$router.go(-1);
    },
    getList() {
      getGradStuRoster(this.$route.query.dgsrId).then((res) => {
        console.log(res, "详情");
        this.form = res.info;
        let arr = this.form.gradRfDetailsList.map((item) => {
          return {
            ...item,
            value: "",
          };
        });
        arr.forEach((item) => {
          if (item.feeType == "A") {
            item.feeType = "宿管";
            item.value = "赔偿金额";
          } else if (item.feeType == "B") {
            item.feeType = "图书馆";
            item.value = "未还赔偿";
          } else if (item.feeType == "C") {
            item.feeType = "饭卡";
            item.value = "退费金额";
          } else if (item.feeType == "D") {
            item.feeType = "水电费";
            item.value = "退费金额";
          } else if (item.feeType == "E") {
            item.feeType = "书费";
            item.value = "退费金额";
          }
        });
        this.form.gradRfDetailsList = arr;
        console.log(arr, " this.form.gradRfDetailsList = ");
        this.formInfo = res.rfDetailsInfo;
        getDicts("dep_grad_scope").then((res) => {
          let data = this.form.gradScope.split(",");
          this.studentStatusData = res.data
            .filter((item) => data.includes(item.dictValue))
            .map((item) => item.dictLabel);
        });
        getDicts("basic_student_bank_status").then((res) => {
          res.data.forEach((item) => {
            if (this.form.studentBankInfoList.bankStatus == item.dictValue) {
              this.form.studentBankInfoList.bankStatus = item.dictLabel;
            }
          });
        });
      });
    },
    handleAdd(data) {
      this.open = true;
      if (!data) {
        this.title = "新增";
      } else {
        this.backForm.bsbiId = data;
        this.backForm.cardNumber = this.form.studentBankInfoList.cardNumber;
        this.backForm.bankName = this.form.studentBankInfoList.bankName;
        console.log(this.backForm.bsbiId, data);
        this.title = "修改";
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.backForm.studentId = this.form.studentId;
      this.$refs["back"].validate((valid) => {
        if (valid) {
          if (this.backForm.bsbiId != undefined) {
            updataBankInfo(this.backForm).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            bankInfoAdd(this.backForm).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    cancel() {
      this.backForm = {};
      this.open = false;
    },
  },
};
</script>
    <style scoped>
.Information {
  margin-top: 5px;
  background-color: #efefef;
  padding: 1% 2% 0 0%;
  margin-bottom: 1%;
}

.text-details {
  background-color: #efefef;
  padding: 1% 2% 2% 2%;
  margin-bottom: 2%;
}
.returns {
  display: flex;
  justify-content: space-between;
  padding: 2%;
  border: 1px solid #d9d9d9;
  margin-bottom: 1%;
}
.type-conten {
  display: flex;

  justify-content: space-between;
  border: 1px solid #d9d9d9;
  margin-bottom: 1%;
}
.typeRet {
  width: 15%;
  padding: 2%;
  text-align: center;
  background-color: #efefef;
}
.amongs {
  display: flex;
  padding: 1%;
  flex-wrap: wrap;
}

.rigth {
  width: 14%;
  padding: 2%;
  font-weight: bold;
  text-align: center;
}

.mack {
  margin: 4% 0;
}

.mack span:nth-child(1) {
  margin-right: 10%;
}
.backId {
  margin-left: 20px;
  color: #4095e5;
  cursor: pointer;
}
</style>